:root {
  --el-color-white: #fff;
  --el-color-black: #000;
  --el-color-primary-rgb: 31, 120, 255;
  --el-color-success-rgb: 54, 209, 88;
  --el-color-warning-rgb: 255, 211, 35;
  --el-color-danger-rgb: 251, 84, 84;
  --el-color-error-rgb: 251, 84, 84;
  --el-color-info-rgb: 237, 237, 237;
  --el-font-size-extra-large: 22px;
  --el-font-size-large: 20px;
  --el-font-size-medium: 16px;
  --el-font-size-base: var(--hd--font-size-base);
  --el-font-size-small: 12px;
  --el-font-size-extra-small: 12px;
  --el-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  --el-font-weight-primary: 500;
  --el-font-line-height-primary: 24px;
  --el-index-normal: 1;
  --el-index-top: 1000;
  --el-index-popper: 2000;
  --el-border-radius-base: var(--hd--border-radius-base);
  --el-border-radius-small: var(--hd--border-radius-base);
  --el-border-radius-round: var(--hd--border-radius-base);
  --el-border-radius-circle: 100%;
  --el-transition-duration: 0.3s;
  --el-transition-duration-fast: 0.2s;
  --el-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
  --el-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
  --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
  --el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
  --el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier), opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
  --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
  --el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
  --el-transition-box-shadow: box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
  --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
  --el-component-size-large: 40px;
  --el-component-size: 32px;
  --el-component-size-small: 28px;
}

:root {
  color-scheme: light;

  --el-color-white: #fff;
  --el-color-black: #000;
  --el-color-primary: var(--hd--color-primary);
  --el-color-primary-light-3: #62a1ff;
  --el-color-primary-light-5: #8fbcff;
  --el-color-primary-light-7: #bcd7ff;
  --el-color-primary-light-8: #d2e4ff;
  --el-color-primary-light-9: #e9f2ff;
  --el-color-primary-dark-2: #1960cc;
  --el-color-success: var(--hd--color-success);
  --el-color-success-light-3: #72df8a;
  --el-color-success-light-5: #9be8ac;
  --el-color-success-light-7: #c3f1cd;
  --el-color-success-light-8: #d7f6de;
  --el-color-success-light-9: #ebfaee;
  --el-color-success-dark-2: #2ba746;
  --el-color-warning: var(--hd--color-warning);
  --el-color-warning-light-3: #ffe065;
  --el-color-warning-light-5: #ffe991;
  --el-color-warning-light-7: #fff2bd;
  --el-color-warning-light-8: #fff6d3;
  --el-color-warning-light-9: #fffbe9;
  --el-color-warning-dark-2: #cca91c;
  --el-color-danger: var(--hd--color-danger);
  --el-color-danger-light-3: #fc8787;
  --el-color-danger-light-5: #fdaaaa;
  --el-color-danger-light-7: #fecccc;
  --el-color-danger-light-8: #fedddd;
  --el-color-danger-light-9: #fee;
  --el-color-danger-dark-2: #c94343;
  --el-color-error: var(--hd--color-danger);
  --el-color-error-light-3: #fc8787;
  --el-color-error-light-5: #fdaaaa;
  --el-color-error-light-7: #fecccc;
  --el-color-error-light-8: #fedddd;
  --el-color-error-light-9: #fee;
  --el-color-error-dark-2: #c94343;
  --el-color-info: var(--hd--color-info);
  --el-color-info-light-3: #f2f2f2;
  --el-color-info-light-5: #f6f6f6;
  --el-color-info-light-7: #fafafa;
  --el-color-info-light-8: #fbfbfb;
  --el-color-info-light-9: #fdfdfd;
  --el-color-info-dark-2: #bebebe;
  --el-bg-color: #fff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #fff;
  --el-text-color-primary: var(--hd--color-text-primary);
  --el-text-color-regular: var(--hd--color-text-regular);
  --el-text-color-secondary: var(--hd--color-text-secondary);
  --el-text-color-placeholder: var(--hd--color-text-placeholder);
  --el-text-color-disabled: var(--hd--color-text-placeholder);
  --el-border-color: var(--hd--border-color-base);
  --el-border-color-light: #dcdfe6;
  --el-border-color-lighter: #dcdfe6;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;
  --el-fill-color: var(--hd--background-color-block);
  --el-fill-color-light: transparent;
  --el-fill-color-lighter: transparent;
  --el-fill-color-extra-light: transparent;
  --el-fill-color-dark: transparent;
  --el-fill-color-darker: transparent;
  --el-fill-color-blank: transparent;
  --el-box-shadow: 2px 2px 4px 1px rgb(0 0 0 / 10%);
  --el-box-shadow-light: 0 2px 2px 1px rgb(0 0 0 / 10%);
  --el-box-shadow-lighter: 0 0 6px rgb(0 0 0 / 12%);
  --el-box-shadow-dark: 0 16px 48px 16px rgb(0 0 0 / 8%), 0 12px 32px rgb(0 0 0 / 12%), 0 8px 16px -8px rgb(0 0 0 / 16%);
  --el-disabled-bg-color: var(--hd--disabled-bg-color);
  --el-disabled-text-color: var(--hd--disabled-text-color);
  --el-disabled-border-color: var(--hd--disabled-border-color);
  --el-overlay-color: rgb(0 0 0 / 80%);
  --el-overlay-color-light: rgb(0 0 0 / 70%);
  --el-overlay-color-lighter: rgb(0 0 0 / 50%);
  --el-mask-color: rgb(255 255 255 / 90%);
  --el-mask-color-extra-light: rgb(255 255 255 / 30%);
  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: var(--hd--border-color-base);
  --el-border: var(--el-border-width) var(--el-border-style) var(--hd--border-color-base);
  --el-svg-monochrome-grey: var(--el-border-color);
}
